<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>密码输入验证框</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.box {
				width: 500px;
				margin: 200px auto;
				/*border: 1px solid #ccc;*/
				/*background-color: pink;*/
			}
			.box input {
				width: 300px;
				height: 30px;
				padding-left: 10px;
				/*border: 0;*/
				outline: none;
			}
			.message {
				position: relative;
				color: #999;
				font-size: 12px;
				padding-left: 17px;
			}
			.message::before {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				content: '';
				width: 15px;
				height: 15px;
				background: url(img/mess.png) no-repeat center top;
			}
			.wrong::before {
				/*position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				content: '';
				width: 15px;
				height: 15px;*/
				background: url(img/wrong.png) no-repeat center top;
			}
			.right::before {
				/*position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				content: '';
				width: 15px;
				height: 15px;*/
				background: url(img/right.png) no-repeat center top;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<input type="password" name="" id="" value="" />
			<span class="message">请输入6~16位的密码</span>
		</div>
		
		<script type="text/javascript">
			var ipt = document.querySelector('input');
			var mess = document.querySelector('span');
			
			ipt.onblur = function() {
				//判断输入框的字符长度
				if(this.value.length > 0 &&this.value.length < 6 || this.value.length > 16) {
					//输入的不符合要求
					mess.className = 'message wrong';
					mess.innerHTML = '输入的密码不符合要求';
				}else if(this.value.length >= 6 && this.value.length <= 16){
					mess.className = 'message right';
					mess.innerHTML = '格式正确'
				}else if(this.value == '') {
					mess.className = 'message';
					mess.innerHTML = '请输入6~16位的密码'
				}
			}
		</script>
	</body>
</html>
